<template>
<div>
  <form action="/">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      input-align="center"
    />
  </form>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item>1</van-swipe-item>
    <van-swipe-item>2</van-swipe-item>
    <van-swipe-item>3</van-swipe-item>
  </van-swipe>
  <van-grid>
    <van-grid-item icon="photo-o" text="整租" />
    <van-grid-item icon="photo-o" text="合租" />
    <van-grid-item icon="photo-o" text="地图找房" />
    <van-grid-item icon="photo-o" text="去出租" />
  </van-grid>
</div>
  
</template>
<script>
import { Toast } from 'vant';

export default {
  name: 'HomePage',
  data() {
    return {
      value: '',
    };
  },
  computed: {},
  watch: {},
   methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    },
  },
};
</script>
<style scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>